<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="wa">
    <title></title>
    <script src="../js/jquery-3.1.1.js"></script>
    <style>
        body{
            /*文字大小12px，1.5倍的行间距，arial 一种字体*/
            font: 12px/1.5 arial;
            color: #666;
        }
        ul,p{
            margin: 0;
            padding: 0;
        }
        #star{
            width: 600px;
            margin: 10px auto;
            position: relative;
        }
        #star span,
        #star ul{
            float: left;
            margin: 0 5px;
        }
        #star li{
            list-style-type: none;
            float: left;
            width: 24px;
            height: 24px;
            cursor: pointer;
            background-image: url(../img/star.png);
            background-repeat: no-repeat;
        }
        #star li.on{
            background-position: 0 -28px;
        }
        #star li.spa{
            background-position: 0 -28px;
        }
        #star p{
            position: absolute;
            top: 20px;
            width: 160px;
            /*background-color: purple;*/
        }
        #star p em{
            display: block;
            font-style: normal;
            color: #f60;
        }
        #star strong{
            color: #f60;
        }
    </style>
</head>
<body>
    <div id="star">
        <span>点击星星评分</span>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <!--显示最终的评分结果-->
        <span class="sp"></span>
        <!--显示评分及评语-->
        <p></p>
    </div>
</body>
</html>
<script>

    $(function(){

        var msg=[
            "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
            "不满意|部分有破损，与卖家描述的不符，不满意",
            "一般|质量一般，没有卖家描述的那么好",
            "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
            "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
        ];

        var isStar=0;
        
        $('#star li').each(function(){
            // var index=$('#star ul li').index();
                
            // 显示/隐藏对应的星星
            $(this).hover(function(index){
                // console.log(this);
                $(this).addClass('on').prevAll().addClass('on');

                $('#star p').html('<em><b>'+($(this).index()+1)+'</b>分 '+
                            msg[$(this).index()].split('|')[0]+'</em>'+
                            msg[$(this).index()].split('|')[1]);
                $('#star p').css({'left':$(this).width()*$(this).index()+'px'});

            },function(){
                $('#star li').removeClass('on');
                $('#star p').html('');

            })


            // 点击li标签之后，对评分进行处理
            $('#star li').click(function(){
                // console.log($(this).index());
                var index=parseInt($(this).index());
                var index2=index+1;
                // console.log(index2);
                $('#star p').html('');
                $('#star li').addClass('on').prevAll().addClass('on');
                $('#star li').nextAll().removeClass('on');
                $(this).addClass('spa').prevAll().addClass('spa');
                $(this).nextAll().removeClass('spa')
                $('#star .sp').html('<strong>'+index2+'分</strong>('+msg[$(this).index()].split('|')[1]+')');
            })


        })

    })

</script>